<script setup>
import {computed, reactive, ref, watch, watchEffect} from "vue";

let name = "张三"

let car = reactive({
  brand: "小米",
  price: 9999
})
function buy(){
  alert("购买成功");
}
let fruits = ["苹果","香蕉"]
let url = ref("https://www.baidu.com");
function changeUrl(){
  console.log(url.value);
  url.value = "www.google.com"
}

function addPrice() {
  car.price += 100;
}
const num = ref(1);
const totalPrice = computed(() => car.price * num.value);
// watch(num, (newValue,oldValue,onCleanup ) => {
//   console.log(oldValue);
//   console.log(newValue);
//   if(num.value >3){
//     alert("超出购买数量")
//     num.value = 3;
//   }
// })
watchEffect(()=>{
  if(num.value > 3 ){
    alert("数量不能超过3");
    num.value = 3;
  }
})
</script>

<template>
  <a v-bind:href="url">go {{url}}</a>
  <button @click="changeUrl">改变地址</button>
 <h2>姓名:{{name}}</h2>
 <h2>品牌:{{car.brand}}</h2>
  <h2>价格:{{car.price}}</h2>
  <h2>数量：{{ num }}</h2>
  <button @click="addPrice">加价</button>
  <button @click="num++">加量</button>
  <button v-on:click="buy">购买{{totalPrice}}</button>
  <p></p>
  <span v-if="car.price <= 10000">可以买</span>
  <span v-if="car.price > 10000">太贵了</span>

  <li v-for="(fruit,i) in fruits">{{fruit}}</li>
</template>

<style scoped>

</style>